<template>
  <div class="video-container" v-loading="loading">
    <div></div>
    <div class="video-list">
      <div>
        <div class="video">
          <custom-player :video-data="videoData" @play="onPlayerPlay" @ended="playEnd" />
        </div>
      </div>
      <div>
        <accessory />
      </div>
    </div>
    <el-card class="chapterList">
      <h1>章节目录</h1>
      <el-collapse v-model="menuModel">
        <el-collapse-item
          v-for="(item,index1) in chapterList"
          :key="item.chapterId"
          :name="item.chapterId"
        >
          <template slot="title">
            <h2 style="padding-left: 10px">{{item.chapterName}}</h2>
          </template>
          <div
            v-for="(video,index2) in item.videoList"
            :class="[video.videoId==$route.query.videoId?'active':'']"
            :key="index2"
            class="video-item"
            @click="refashVideo(item.chapterId,video.videoId,video.videoId)"
          >
            <div style="line-height: 40px">
              <i
                class="el-icon-lock"
                v-if="!video.isFinish && video.videoId != $route.query.videoId"
              ></i>
            </div>
            <div class="video-item-text">
              <span style="margin-right: 10px">{{(index1+1)}}.{{index2+1}}</span>
              <span>{{video.videoName}}</span>
            </div>
            <div>
              <span class="tip" :class="[video.isFinish?'success':'info']"></span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
import customPlayer from "@/components/customPlayer/customPlayer";
import Accessory from "@/views/courseDetail/comp/Accessory";
import { getChapter, getVideo } from "@/api/course";

export default {
  components: { customPlayer, Accessory },
  name: "index",
  data() {
    return {
      menuModel: [],
      loading: true,
      queryInfo: {},
      videoParams: {
        courseId: undefined,
        chapterId: undefined,
        videoId: undefined
      },
      chapterList: [],
      videoData: {},
      // sources:[],
      chapterVisible: true,
      chapterId: undefined,
      // 用于激活菜单栏
      videoId: this.$route.query.videoId
    };
  },
  computed: {},
  watch: {
    queryInfo: {
      handler(newV) {
        this.queryInfo = newV;
        this.videoParams.chapterId = String(newV.chapterId);
      },
      immediate: true
    },
    chapterList: {
      handler(newV) {
        this.chapterList = newV;
      },
      immediate: true
    }
  },
  created() {
    this.queryInfo = this.$route.query;
    console.log("章节查询条件：", this.queryInfo);
    this.videoParams.courseId = String(this.queryInfo.courseId);
    this.getChapter();
  },
  mounted() {},
  methods: {
    getChapter() {
      getChapter(this.queryInfo).then(res => {
        if (res.code === 200) {
          this.chapterList = res.data;
          console.log(res.data);
          const ids = this.chapterList.map(item => item.chapterId);
          this.menuModel = ids;

          this.videoParams.chapterId = String(this.queryInfo.chapterId);
          this.videoParams.videoId = String(this.queryInfo.videoId);
          getVideo(this.videoParams).then(res => {
            if (res.code == 200) {
              console.log(res.data);
              this.videoData = res.data;
              this.loading = false;
            }
          });
        }
      });
    },
    refashVideo(
      chapterId = this.queryInfo.chapterId,
      videoId = this.queryInfo.videoId,
      id
    ) {
      let flag = null;
      let videoList = null;
      let index = null;
      // console.log(url)
      videoList = this.chapterList
        .map(item => item.videoList.map(item2 => item2))
        .flat(1);
      index = videoList.findIndex(item => {
        return item.videoId == id;
      });
      console.log(index);
      const sliceArr = videoList.slice(0, index);
      console.log(sliceArr);
      // 用于判断前一个视频是否观看完毕
      flag = sliceArr.every(item => item.isFinish == 1);

      // 看完后且不发送重复请求
      if (flag && this.videoParams.videoId != videoId) {
        this.loading = true;
        this.videoParams.chapterId = String(chapterId);
        this.videoParams.videoId = String(videoId);

        // 刷新路由，获取请求新数据
        this.$router.push({
          path: "/course",
          query: {
            courseId: this.queryInfo.courseId,
            videoId: videoId,
            chapterId: chapterId
          }
        });
        // 获取视频信息
        getVideo(this.videoParams).then(res => {
          if (res.code == 200) {
            console.log(res.data);
            this.videoData = res.data;
            this.loading = false;
          }
        });
      } else if (!flag) {
        this.$modal.msgWarning("上个视频尚未观看完毕");
      }
    },
    // 开始播放周期
    async onPlayerPlay(e) {
      console.log(e);
    },
    // 播放结束周期
    async playEnd() {
      // this.getChapter()
      // this.$forceUpdate()
      // 播放结束刷新路由
      this.$router.go(0);
    }
  }
};
</script>

<style scoped>
.video-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /*padding-left: 50px;*/
}
.video-list {
  display: flex;
  flex-direction: column;
}
.video {
  /*margin: 0 auto;*/
  width: 960px;
  height: 640px;
  margin-bottom: 30px;
}
.chapterList {
  position: relative;
  top: -20px;
  right: 0px;
  width: 350px;
  /*height: 650px;*/
  min-height: 720px;
  background-color: #fff;
  margin-left: 50px;
  overflow: auto;
}
.video-item {
  display: flex;
  flex-direction: row;
  justify-content: left;
  font-size: 22px;
  cursor: pointer;
  height: 40px;
  margin-bottom: 10px;
  line-height: 40px;
  padding: 0 38px;
}
.video-item:hover {
  background-color: #f0f6ff;
}
.video-item-text {
  margin: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-iem:first-child {
  background-color: #f0f6ff;
}
.active {
  background-color: #f0f6ff;
}
.tip {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin-right: 10px;
}
</style>
